<template>
  <div>
    <div style="margin-top: -10px ;padding: 10px 0;box-shadow: 0 0 6px 0 rgba(0,0,0,0.16)">
      <div class="header">
        <div class="container">
          <div class="menu-left">
            <div class="logo"><img src="../assets/logo.png" alt=""></div>
            <div class="item">
              <p>你好，
                <span v-if="user===''||user===null">
                  <router-link class="lg" to="/login">请登录</router-link>
                  <router-link class="lg" to="/register">快速注册</router-link>
                </span>
                <span v-else>
                  <span>
                  {{ user }}
                </span>
                  <span class="out" @click="loginOut()">退出</span>
                </span>

              </p>

            </div>
          </div>
          <div class="menu-right">
            <div class="item1">
              <p>
                <router-link class="lg" to="/userDetail">个人中心</router-link>
              </p>
              <p>
                <router-link class="lg" to="/myOrder">我的订单</router-link>
              </p>
              <p>
                <router-link class="lg" to="/myCart">购物车</router-link>
              </p>
              <!--<p>帮助</p>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;display: flex;margin: 10px 0">
      <el-menu :default-active="active" style="margin: 0 auto;background: none" mode="horizontal" router
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/topBook">排行榜</el-menu-item>
        <el-menu-item index="/type">分类</el-menu-item>
        <el-menu-item index="/search">去搜索</el-menu-item>
      </el-menu>
    </div>
    <div v-if="$route.path==='/'">
      <el-carousel :interval="0" arrow="always">
        <el-carousel-item v-for="(item,index) in myData.lbt" :key="index">
          <el-image
              style="width:100%; height:100%"
              :src="item.idView"
              fit="fit"></el-image>
        </el-carousel-item>
      </el-carousel>
      <bookList title="推荐期刊" :book-data="myData.books"></bookList>
    </div>
  </div>

</template>

<script>

import {getToken, removeToken} from "@/store/token";
import bookList from "@/components/bookList.vue";

export default {
  name: "myNav",
  components: {bookList},
  data() {
    return {
      user: '',
      active: '/',
      myData: {
        lbt: [
          {id: 0, idView: require('../assets/lbt/1.jpg')},
          {id: 1, idView: require('../assets/lbt/2.jpg')},
          {id: 2, idView: require('../assets/lbt/3.jpg')},
          {id: 3, idView: require('../assets/lbt/4.jpg')},
        ],
        books: {},
        page: 1,
        size: 10,
        total: 0
      },
    }
  },
  methods: {
    loginOut() {
      this.$message({
        message: '退出成功',
        type: 'success'
      });
      removeToken('Authorization');
      removeToken("user")
      removeToken("role")
      removeToken("tokenStartTime")
      this.$router.push('/');
      window.location.reload();
    },
    getSyBooks() {
      this.$api.book.getBooks(
          this.myData.page,
          this.myData.size
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.myData.books = data.content.records;
          this.myData.total = data.content.total
        } else {
          this.$message.error('服务器返回失败');
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      });
    }
  },
  mounted() {
    this.user = ''
    if (getToken('user') !== null && getToken("role") !== "admin") {
      this.user = JSON.parse(getToken('user')).phone;
      if (this.user !== null) {
        this.user = this.user.slice(0, 3) + '****' + this.user.slice(7)
      }
    }
    this.active = this.$route.path;
    this.getSyBooks()
  }
}
</script>

<style scoped>
.lg {
  color: #000;
  margin-right: 10px;
}

a {
  text-decoration: none;
}

a:hover {
  color: #ff0000;
  cursor: pointer;
}

.out {
  margin-left: 20px;
}

.out:hover {
  color: #ff0000;
  cursor: pointer;
}

.select {
  width: 90px;
}

.header {
  width: 100%;
}

.container {
  position: relative;
  display: flex;
  margin-top: 10px;
  height: 40px;
}

p {
  display: inline;
//width: 50px; font-size: 13px;
}

.menu-left {
  width: 400px;
  margin-left: 50px;
  display: flex;
}

.item {
  width: 300px;
  display: flex;
  justify-content: space-evenly;
}

.item1 {
  display: flex;
  width: 400px;
  justify-content: space-evenly;
}

.menu-right {
  width: 400px;
  display: flex;
  position: absolute;
  right: 0;

}

.logo {
  margin-top: 5px;
  width: 100px;
}

.logo img {
  width: 100%;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
</style>